Skip to content

Feat: Allow scrolling via keyboard in code blocks #2264

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 2 commits into from
Nov 30, 2023
Merged

Feat: Allow scrolling via keyboard in code blocks #2264

merged 2 commits into from
Nov 30, 2023

Conversation

@jhildenbiddle
Copy link
Member

Summary

See title and original issue (below).

Related issue, if any:

#2224

What kind of change does this PR introduce?

Feature

For any code change:

  • No documentation changes required
  • No automated tests required

Note: These changes were tested and verified with the docsify-copy-code plugin.

Does this PR introduce a breaking change?

No

Tested in the following browsers:

  • Chrome
  • Firefox
  • Safari
  • Edge

@vercel
Copy link

vercel bot commented Oct 14, 2023 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
docsify-preview ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 30, 2023 5:41am

@jhildenbiddle jhildenbiddle changed the title Allow scrolling via keyboard in code blocks Feat: Allow scrolling via keyboard in code blocks Oct 14, 2023
This was referenced Oct 17, 2023
Closed
Closed
@trusktr
Copy link
Member

trusktr commented Oct 22, 2023

Can we see before/after videos?

@jhildenbiddle
Copy link
Member Author

jhildenbiddle commented Oct 22, 2023 •
edited
Loading

Can we see before/after videos?

Even better...

https://docsify-preview-git-2224-scrollable-code-docsifyjs.vercel.app/#/more-pages?id=sidebar

  1. Click the "Sidebar" heading in the content area
  2. Hit TAB three times so the focus is on code block.
    CleanShot 2023-10-22 at 15 07 23@2x
    Note: Tab/focus behavior may be determined by your browser setting. For example, here are the settings for Safari 17:
    CleanShot 2023-10-22 at 15 09 02@2x
  3. Use the arrow keys to scroll right/left.

Now try the same thing on https://docsify.js.org/#/more-pages?id=sidebar:

  1. Click the "Sidebar" heading in the content area
  2. Hit TAB three times. Notice that it is not possible to focus on the code block, making it impossible to scroll the code block using the arrow keys.

@jhildenbiddle jhildenbiddle marked this pull request as ready for review November 2, 2023 16:02
@jhildenbiddle jhildenbiddle requested a review from a team November 2, 2023 16:07
@jhildenbiddle jhildenbiddle linked an issue Nov 16, 2023 that may be closed by this pull request
Accessibility - scrollable code region should be focusable #2224
Closed
1 task
@jhildenbiddle jhildenbiddle merged commit b8a5fea into develop Nov 30, 2023
@jhildenbiddle jhildenbiddle deleted the 2224-scrollable-code branch November 30, 2023 05:45
@sy-records sy-records mentioned this pull request May 5, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Koooooo-7 Koooooo-7 Koooooo-7 approved these changes

@sy-records sy-records sy-records approved these changes

@trusktr trusktr Awaiting requested review from trusktr

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Accessibility - scrollable code region should be focusable

4 participants

@jhildenbiddle @trusktr @Koooooo-7 @sy-records